import router from '@/router'
import store from '@/store'

import NProgress from 'nprogress' // 引入一份进度条插件
import 'nprogress/nprogress.css' // 引入进度条样式
// 使用步骤
// 1. yarn add nprogress 已安装
// 2. 导入包 js css
// 3. 使用

const WhiteList = ['/login', '/404']

// 全局前置守卫 (在页面进入之前，都会先经过前置守卫)
router.beforeEach(async(to, from, next) => {
  NProgress.start()

  const token = store.getters.token
  if (token) {
    // 有token, 看是否访问的是登录页，如果是登录页，引导到首页
    if (to.path === '/login') {
      next('/')
      NProgress.done()
    } else {
      // 只要正常放行，一定是有个人信息之后，知道你是谁了，才放行
      // 提交 action， 发送获取个人信息的请求，拿到个人信息，知道角色权限之后，才放行
      // store.commit(mutation) store.dispatch(action)

      // 判断vuex中是否已经有了个人信息，如果没有先发请求，请求回来，才放行
      // 等一个异步的操作结束之后，再做某件事
      if (!store.state.user.userInfo.userId) {
        // console.log(store.dispatch('user/getUserInfo'))
        await store.dispatch('user/getUserInfo')
        // console.log('将来根据该信息控制权限：', res)
      }
      next()
    }
  } else {
    // 没有token，没有身份的不能乱跑 访问的是login
    if (WhiteList.includes(to.path)) {
      next()
    } else {
      // 要去的这个页面，是需要身份认证的，且没有token
      next('/login')
      NProgress.done()
    }
  }
})

// 全局后置守卫 (在页面进入之后，会经过后置守卫)
// 全局后置守卫，有一个注意点：一旦在全局前置中做了拦截，拦截到了其他的页面，问题：后置守卫不会被触发
// 解决方案：如果在前置守卫做了拦截，就需要手动关闭NProgress
router.afterEach((to, from) => {
  NProgress.done()
})
